<template>
    <div class="container">
        <div class='u-title f-mtp10'>
            <h2>{{h2_title}}</h2>
        </div>

        <div class='u-content mn flex flex-column flex-center'>
            <div class='item'>
                <label for="">短剧标题</label>
                <div class='item-right'>
                    <el-input v-model="title" clearable placeholder="短剧标题"></el-input>
                </div>
            </div>
            <div class='item'>
                <label for="">所属分类</label>
                <div class='item-right'>
                    <CaseTypeSelect ref="caseType" @getCaseType='getCaseType' class='f-w-full'/>
                </div>
            </div>
            <div class='item'>
                <label for="">播放量</label>
                <div class='item-right'>
                    <el-input v-model="playCount" placeholder="播放量"></el-input>
                </div>
            </div>
            <div class='item'>
                <label for="">封面图片</label>
                <div class='item-right'>
                    <div class="u-upload">
                        <input
                        type="file"
                        @change="upImg"
                        name="file"
                        id="file"
                        accept="image/png, image/jpeg, image/gif, image/jpg"
                        class="u-upload-file"
                        >
                        <label for="file" class="btn btn-success">
                        <img v-if="picUrl" :src="picUrl" alt="">
                        <span v-else>上传封面</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class='item'>
                <label for="">上传视频</label>
                <div class='item-right'>
                    <div class="u-upload">
                        <input
                        type="file"
                        @change="upVedio"
                        ref="addFile"
                        name="file"
                        id="file1"
                        accept="video/*"
                        class="u-upload-file"
                        >
                        <label for="file1" class="btn btn-success">
                            <!-- <img v-if="iconUrl" :src="iconUrl" alt="">
                            <span v-else>上传图标</span> -->
                            <span v-if="videoUrl">{{videoUrl}}</span>
                            <span v-else>上传视频</span>
                        </label>
                    </div>
                    <div class="showLoading"  v-if="showVideLoading">
                        <i class="el-icon-loading"></i>
                        <span>视频上传中。。。</span>
                    </div>
                </div>
            </div>
        
            <div class='btn-box f-ptp20'>
                <el-button
                    class='f-w250 s-bg-green s-cfff'
                    @click="submit">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import CaseTypeSelect from '../../components/CaseTypeSelect'
export default {
  name: 'AddLawyer',
  components: {
    'CaseTypeSelect': CaseTypeSelect
  },
  data() {
    return {
      showVideLoading: false,  
      h2_title: '新增短剧',
      id: null,
      title: '', // 标题
      picUrl: '',
      videoUrl: '',
      caseType: '',
      playCount: ''   // 播放量
    }
  },
  created() {
      if (this.$route.params.id) {
        this.id = this.$route.params.id;
        this.h2_title = "编辑短剧";
        this.getVideoDetail(this.id);
      }
  },
  methods: {
    getVideoDetail(videoId) {
        this.$store.dispatch('GET_VIDEO_DETAIL', {
            id: videoId
        }).then(res => {
            if(res.data.retCode == 0) {
                console.log('res.data.data.:::', res.data.data)
                console.log('res.data.data.playCount:::', res.data.data.playCount);
                this.title = res.data.data.title;
                this.picUrl = res.data.data.picUrl;
                this.videoUrl = res.data.data.videoUrl;
                this.playCount = res.data.data.playCount;
                this.caseType = res.data.data.caseType;
                this.$refs.caseType.setValue(res.data.data.caseType);
            } else {
                res.data.errorMsg && this.$message.warning(res.data.errorMsg);
            }
        })
    },
    // 提交按钮点击事件
    submit() {
        if(this._utils.isEmpty(this.title)) {
            this.$message.warning('请输入短剧标题！');
            return;
        }
        if(this._utils.isEmpty(this.caseType)) {
            this.$message.warning('请选择所选分类！');
            return;
        }
        if(this._utils.isEmpty(this.playCount)) {
            this.$message.warning('请输入播放量！');
            return;
        }
        if(this._utils.isEmpty(this.picUrl)) {
            this.$message.warning('请上传图片！');
            return;
        }
        if(this._utils.isEmpty(this.videoUrl)) {
            this.$message.warning('请上传视频！');
            return;
        }
        if(this.id) {
            this.updateVideo();
        } else {
            this.addVideo();
        }
    },
    // 添加短剧
    addVideo() {
        this.$store.dispatch('ADD_VIDEO', {
            title: this.title,
            caseType: this.caseType,
            videoUrl: this.videoUrl,
            picUrl: this.picUrl,
            playCount: this.playCount
        }).then(res => {
            if(res.data.retCode == 0) {
                this.$message.success('添加成功！');
                this.$router.push('/home/playlet');
            } else {
                res.data.errorMsg && this.$message.warning(res.data.errorMsg);
            }
        })
    },
    // 更新短剧
    updateVideo() {
        this.$store.dispatch('UPDATE_VIDEO', {
            id: this.id,
            title: this.title,
            caseType: this.caseType,
            videoUrl: this.videoUrl,
            picUrl: this.picUrl,
            playCount: this.playCount
        }).then(res => {
            if(res.data.retCode == 0) {
                this.$message.success('编辑成功！');
                this.$router.push('/home/playlet');
            } else {
                res.data.errorMsg && this.$message.warning(res.data.errorMsg);
            }
        })
    },
    // 上传图片
    upImg(e) {
      const files = e.target.files;
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "lawfirm");
      form.append("type", "1");
      this.upfile(form, 'img')
    },
    // 上传视频
    upVedio(e) {
      const files = e.target.files;
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "video");
      form.append("type", "3");
      this.upfile(form, 'video')
      this.showVideLoading = true;
    },
    // 上传
    upfile(formData, type) {
      this.$store.dispatch("UPLOAD_FILE", formData).then(res => {
        console.log("res::::up:::", res);
        if(res.data.retCode == 0) {
          this.$message.success('上传成功！');
          if(type == 'img') {
            this.picUrl = res.data.data;
          } else {
            this.videoUrl = res.data.data;
            this.showVideLoading  = false;
          }
        } else {
          this.showVideLoading = false;
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      });
    },
    // 获取所属分类  
    getCaseType(caseType) {
       this.caseType = caseType;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  width: 560px;
  /* margin: 0 auto; */
}
.mn{
    padding: 30px 0 50px 0;
}
.item{
    display: flex;
    margin-bottom: 10px;
}
.item>label{
    display: inline-block;
    width: 80px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
}
.item-right{
    width: 250px;
}
.btn-box{
    padding-left: 80px;
}

.showLoading{
    margin-top: 10px;
    font-size: 18px;
    color: #409EFF;
}
</style>
